<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="container">
    <el-container class="home-container">
      <el-header>
        <div class="header">
          <h1>欢迎使用《云餐厅》系统</h1>
        </div>
        <el-button type="danger" @click="OutUp">退出</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :collapse-transition="false"
            background-color="rgb(35 161 125)"
            text-color="#fff"
            active-text-color="#000"
            unique-opened
            :router="true"
          >
            <el-menu-item index="/OrderList">
              <i class="el-icon-document"></i>
              <span slot="title">订单列表</span>
            </el-menu-item>
            <!-- <el-submenu index="/OrderCenter">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">订单中心</span>
              </template>
              <el-menu-item index="/OrderList">
                <i class="el-icon-document"></i>
                <span slot="title">订单列表</span>
              </el-menu-item>
              <el-menu-item index="/OldOrderList">
                <i class="el-icon-document"></i>
                <span slot="title">历史订单</span>
              </el-menu-item>
            </el-submenu> -->
            <el-menu-item index="/TableCenter">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>报表中心</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/MessageCenter">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>消息中心</span>
                <el-badge :value="Number(message_num)" class="item"> </el-badge>
              </template>
            </el-menu-item>
            <el-menu-item index="/MangCenter">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>盲盒中心</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/FoodCenter">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>菜品中心</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/UserCenter">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>账户中心</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  created() {
    this.getUserList();
    this.Notification();
  },
  data() {
    return {
      message_num: 8,
    };
  },
  methods: {
    // 刷新
    async getUserList() {
      const poiId = window.localStorage.getItem("poiId");
      const { data: res } = await this.$http.get(
        "/admin/messageCenter/getList",
        {
          params: {
            poiId,
          },
        }
      );
      if (res.code !== 200) {
        this.$message.error("刷新失败");
        return;
      }
      this.message_num = res.data.length;
    },
    // 退出登录
    OutUp() {
      localStorage.clear();
      this.$router.push("/login");
    },
    Notification() {
      const h = this.$createElement;

      this.$notify({
        title: "提示",
        message: h(
          "i",
          { style: "color: black" },
          "您有一个新的订单，请注意查看"
        ),
      });
    },
  },
};
</script>

<style scoped>
.item {
  margin-left: 10px;
}
h1 {
  color: #fff;
}
.container {
  height: 100%;
}
.home-container {
  height: 100%;
}
.el-header {
  background-color: #eea507;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-submenu {
  background-color: #eea507 !important;
}
.el-submenu__title {
  background-color: #eea507 !important;
}

.header {
  display: flex;
  align-items: center;
}

.header img {
  width: 180px;
}
.el-aside {
  background-color: #f4ba3e;
}
.el-aside .el-menu {
  border-right: none;
  background-color: #eea507 !important;
}
.el-menu-item {
  background-color: #eea507 !important;
}

.el-main {
  height: 100%;
  background-color: #eaedf1;
}
.el-container.is-vertical {
  height: 100%;
  flex-direction: column;
}
.toggle-button {
  background: linear-gradient(
    60deg,
    rgb(207, 197, 182) 0%,
    rgb(228, 175, 51) 100%
  );
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
